import $ from 'jquery'
import * as joint from 'jointjs'
import Cell from './cell'
import LinkModel from '../model/link-model'
import {
    colorTheme
} from '../graph/theme'

class Link extends Cell {
    constructor(...args) {
        super(...args)
        this.source = args[0]
        this.target = args[1]
        this.setLinkModel()
        this.jointAttrs = $.extend(true, {}, this.getBasicAttrs(), args[2])
        this._jointInstance = new joint.dia.Link(this.jointAttrs)
        this.type = 'normal'
    }

    getBasicAttrs() {
        return {
            connector: {
                name: 'normal',
                // args: {
                //     type: 'gap'
                // }
            },
            // router: {
            //     name: 'normal', // 'orthogonal', 'manhattan', 'metro', 'oneSide'
            // },
            source: {
                id: this.source.jointInstance.id,
                anchor: {
                    name: 'right'
                }
            },
            target: {
                id: this.target.jointInstance.id,
                anchor: {
                    name: 'left'
                }
            },
            labels: [{
                position: 0.5,
                attrs: {
                    text: {
                        'font-weight': 'bold'
                    }
                }
            }],
            attrs: {
                '.connection': {
                    stroke: '#333', // line color
                    fill: 'none',
                    'stroke-width': 1
                },
                '.marker-vertices': {
                    fill: 'none'
                },
                '.connection-wrap': {
                    fill: 'none'
                },
                '.marker-target': { // arrow head
                    display: 'none',
                    d: 'M 10 0 L 0 5 L 10 10 z' // style
                }
            },
        }
    }

    bindEvent() {}

    highlight(type) {
        this.type = type || this.type
        if (!this.colorTheme[this.type]) {
            this.type = 'normal'
        }
        this.currentColorSet = this.colorTheme[this.type]
        this.setColor()
    }

    set hover(flag) {
        if (flag) {
            this.setColor(this.currentColorSet.hover)
        } else {
            this.setColor()
        }
    }

    unhighlight() {
        this.type = 'normal'
        this.currentColorSet = this.colorTheme[this.type]
        this.setColor()
    }

    updateTheme() {
        this.colorTheme = colorTheme[this.parent.theme].line
        this.currentColorSet = this.colorTheme[this.type]
        this.setColor()
    }

    setColor(color) {
        if (typeof color === 'undefined') {
            color = this.currentColorSet.normal
        }
        this._jointInstance.attr('.connection/stroke', color)
    }

    setLinkModel() {
        this.model = new LinkModel({
            startId: this.source.id,
            endId: this.target.id
        })
    }

    get jointInstance() {
        return this._jointInstance
    }

    addToGraph(graph) {
        this.parent = graph
        this.colorTheme = colorTheme[graph.theme].line
        this.currentColorSet = this.colorTheme.normal
        // don't curve for now
        // this.setCurve()
        graph.addCell(this)
        this.setColor()
        this.jointInstance.toBack()
    }

    setCurve() {
        let func = () => {

            let p1 = {
                x: this.source.jointInstance.attributes.position.x + this.source.jointInstance.attributes.size.width,
                y: this.source.jointInstance.attributes.position.y + this.source.jointInstance.attributes.size.height / 2
            }
            let p2 = {
                x: this.target.jointInstance.attributes.position.x,
                y: this.target.jointInstance.attributes.position.y + this.target.jointInstance.attributes.size.height / 2
            }
            if (p1.y == p2.y) {
                return
            }
            let w = p2.x - p1.x,
                h = p2.y - p1.y
            let v = [{
                x: w * 0.3,
                y: h * 0.2,
            }, {
                x: w * 0.7,
                y: h * 0.8
            }]
            v = v.map(e => {
                return {
                    x: p1.x + e.x,
                    y: p1.y + e.y
                }
            })
            this.jointInstance.vertices(v)
        }
        setTimeout(func, 120)
    }

    set startId(startId) {
        this.model.startId = startId
    }
    get startId() {
        return this.model.startId
    }
    set endId(endId) {
        this.model.endId = endId
    }
    get endId() {
        return this.model.endId
    }
}

export default Link